<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" href="/leek_bbs/statics/images/favicon.ico" >
    <link rel="stylesheet" href="/leek_bbs/statics/yu-ui/js_css/yu.css">
    <link rel="stylesheet" href="/leek_bbs/statics/layui/css/layui.css">
    <link rel="stylesheet" href="/leek_bbs/statics/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/leek_bbs/statics/css/main.css">
    <script src="/leek_bbs/statics/component/common_import.js"></script>
    <style>
        #img-size img{
            width:45px;
            height:45px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <!-- 导航开始 -->
    <div id="hmc">
        <head_menu_comp :is_login="isLoginShow" ref="fo"></head_menu_comp>
    </div>
    <!-- 导航结束 -->
    <!-- 中间主体部分 -->
    <div class="container" id="indexApp">
        <div class="row">
            <span><a href="/leek_bbs/skipPage/index"><span class="glyphicon glyphicon-home"></span></a>&nbsp;>&nbsp;<a href="/leek_bbs/skipPage/index">论坛</a></span>
            <span style="float: right;"><a v-if="users.length>0" href="/leek_bbs/skipPage/my-collect">我的收藏</a></span>
        </div>
        <div class="row" style="margin-top: 12px;">
            <div class="col-sm-8" v-cloak>
                <div class="row" style="border: 1px solid #e5e5e5;">
                    <div class="m-head"><h5>校园专区</h5></div>
                    <div>
                        <div class="col-sm-4 m-col-padding" v-for="campus in campusList">
                            <div class="col-sm-4">
                                <a :href="'/leek_bbs/skipPage/model?pl_type='+campus.id" target="_blank"><img :src="'/leek_bbs/statics/images/'+campus.plate_photo" alt=""></a>
                            </div>
                            <div class="col-sm-8">
                                <span><a :href="'/leek_bbs/skipPage/model?pl_type='+campus.id" target="_blank">{{campus.plate_name}}</a></span><br>
                                <span style="font-size:6px;color: #999;">主题: {{campus.theme}}, 帖数: {{campus.posts}}</span><br>
                                <span style="font-size:6px;color: #999;">{{campus.reserve1}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:16px;border: 1px solid #e5e5e5;">
                    <div class="m-head"><h5>交流与讨论</h5></div>
                    <div>
                        <div class="col-sm-4 m-col-padding" v-for="exchange in exchangeList">
                            <div class="col-sm-4">
                                <a :href="'/leek_bbs/skipPage/model?pl_type='+exchange.id" target="_blank"><img :src="'/leek_bbs/statics/images/'+exchange.plate_photo" alt=""></a>
                            </div>
                            <div class="col-sm-8">
                                <span><a :href="'/leek_bbs/skipPage/model?pl_type='+exchange.id" target="_blank">{{exchange.plate_name}}</a></span><br>
                                <span style="font-size:6px;color: #999;">主题: {{exchange.theme}}, 帖数: {{exchange.posts}}</span><br>
                                <span style="font-size:6px;color: #999;">{{exchange.reserve1}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:16px;border: 1px solid #e5e5e5;">
                    <div class="m-head"><h5>论坛事务</h5></div>
                    <div>
                        <div class="col-sm-4 m-col-padding" v-for="affair in affairList">
                            <div class="col-sm-4">
                                <a :href="'/leek_bbs/skipPage/model?pl_type='+affair.id" target="_blank"><img :src="'/leek_bbs/statics/images/'+affair.plate_photo" alt=""></a>
                            </div>
                            <div class="col-sm-8">
                                <span><a :href="'/leek_bbs/skipPage/model?pl_type='+affair.id" target="_blank">{{affair.plate_name}}</a></span><br>
                                <span style="font-size:6px;color: #999;">主题: {{affair.theme}}, 帖数: {{affair.posts}}</span><br>
                                <span style="font-size:6px;color: #999;">{{affair.reserve1}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--获取在线用户-->
                <div class="row" v-if="users.length>0" style="margin-top:16px;border: 1px solid #e5e5e5;">
                    <div class="m-head"><h5>在线会员</h5></div>
                    <div id="img-size">
                        <div class="col-sm-4 m-col-padding" style="background: transparent;" v-for="item in users">
                            <div class="col-sm-4">
                                <a :href="'/leek_bbs/skipPage/personal?id='+item.id" target="_blank"><img :src="'/leek_bbs/'+item.picture" class="img-circle" alt=""></a>
                            </div>
                            <div class="col-sm-8">
                                <span><a :href="'/leek_bbs/skipPage/personal?id='+item.id" style="display:block;margin-top:10px;color: red;">{{item.username}}</a></span>
                                <!--<span style="font-size:6px;color: #999;"></span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4" v-cloak>
                <div class="row m-mar-left" style="min-width: 350px;border: 1px solid #e5e5e5;">
                    <div class="m-sign" @click="signIn()">
                        <div class="col-sm-6" style="padding:0;height:100%;background-color: #ff6f3d;">
                            <div style="margin:20px 18px;" >
                                <div class="col-sm-4" style="padding-left: 0px;"><a href="javascript:;"><span class="glyphicon glyphicon-list-alt" style="font-size: 24px;"></span></a></div>
                                <div class="col-sm-8" style="margin-top: -4px;padding: 0px;cursor:pointer;">
                                    <span v-if="isSign" style="color: #fff;">
                                        <span style="font-size: 15px;">已签到</span>
                                        <span style="display:block;margin-top:-4px;font-size: 13px;">连续{{continuous_days}}天</span>
                                    </span>
                                    <span v-else style="font-size: 20px;" id="signC"><a href="javascript:;" style="color: #fff;">签到</a></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="row" style="border-bottom: 1px solid #e5e5e5;">
                                <div style="margin: 3px 30px;"><span class="glyphicon glyphicon-user" style="opacity: .6;"></span>&nbsp;{{todaySignCount}}人</div>
                            </div>
                            <div class="row" style="margin: 6px;"><a :class="{'m-a-ml':isAddStyle}" href="javascript:;"><span class="glyphicon glyphicon-stats" style="opacity: .6;"></span>&nbsp;{{sign_ranking}}</a></div>
                        </div>
                    </div>
                    <div class="m-count">
                        <div class="col-sm-6" style="border-right: 1px solid #e5e5e5;">
                            <div class="row" style="border-bottom: 1px solid #e5e5e5;">
                                <h5 align="center"><span>{{todayPostCount}}</span></h5>
                                <h5 align="center">今日发帖数</h5>
                            </div>
                            <div class="row">
                                <h5 align="center"><span>{{postCount}}</span></h5>
                                <h5 align="center">论坛总贴数</h5>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="row" style="border-bottom: 1px solid #e5e5e5;">
                                <h5 align="center"><span>{{yesterdayPostCount}}</span></h5>
                                <h5 align="center">昨日发帖数</h5>
                            </div>
                            <div class="row">
                                <h5 align="center"><span>{{userCount}}</span></h5>
                                <h5 align="center">论坛会员数</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row m-mar-left" style="margin-top:20px;padding-bottom: 15px;min-width: 346px;">
                    <div :class="[{'col-sm-6':true},{'m-border-top':isActiveOne}]" @mouseenter="isActiveOne=true" ><h4 align="center">热帖排行</h4></div>
                    <div :class="[{'col-sm-6':true},{'m-border-top':!isActiveOne}]" @mouseenter="isActiveOne=false"><h4 align="center">精华内容</h4></div>
                    <div class="m-box">
                        <div v-show="isActiveOne">
                            <ul>
                                <li v-for="(item,index) in postHeats" :class="{'first-li':index==0}">
                                    <a :href="'/leek_bbs/skipPage/blogPage?theme_id='+item.id" target="_blank">
                                        <span :class="{'m-span-color':(index==0 || index==1 || index==2)}">{{++index}}.</span>{{item.title}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div v-show="!isActiveOne">
                            <ul>
                                <li v-for="(item,index) in postEssences" :class="{'first-li':index==0}">
                                    <a :href="'/leek_bbs/skipPage/blogPage?theme_id='+item.id" target="_blank">{{++index}}.{{item.title}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row m-mar-left" style="margin-top:20px;padding-bottom: 15px;min-width: 346px;">
                    <div :class="[{'col-sm-6':true},{'m-border-top':isActiveTwo}]" @mouseenter="isActiveTwo=true" ><h4 align="center">最新发表</h4></div>
                    <div :class="[{'col-sm-6':true},{'m-border-top':!isActiveTwo}]" @mouseenter="isActiveTwo=false"><h4 align="center">最新回复</h4></div>
                    <div class="m-box">
                        <div v-show="isActiveTwo">
                            <ul>
                                <li v-for="(item,index) in postPublishs" :class="{'first-li':index==0}">
                                    <a :href="'/leek_bbs/skipPage/blogPage?theme_id='+item.id" target="_blank">{{++index}}.{{item.title}}</a>
                                </li>
                            </ul>
                        </div>
                        <div v-show="!isActiveTwo">
                            <ul>
                                <li v-for="(item,index) in postlastReplys" :class="{'first-li':index==0}">
                                    <a :href="'/leek_bbs/skipPage/blogPage?theme_id='+item.id" target="_blank">{{++index}}.{{item.title}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /中间主体部分 -->

    <!-- 页脚部分 -->
    <footer>
        <div class="row">
            <p>
                <span>Copyright &nbsp;© 2020 &nbsp;凛冬</span>
                <span>版权所有&nbsp;All Rights Reserved.</span>
            </p>
        </div>
    </footer>

</div>

<!--加入defer属性可以按执行异步加载-->
<script src="/leek_bbs/statics/component/head_menu.js"></script>

<script type="text/javascript">

    var indexApp = new Vue({
        el:"#indexApp",
        data:{
            isActiveOne:true,
            isActiveTwo:true,
            isSign:false,
            todaySignCount:"?",         //今日总签到人数
            continuous_days:"",         //连续签到天数
            yesterdayPostCount:"?",    //昨日发帖数
            todayPostCount:"?",        //今日发帖数
            postCount:"?",             //论坛总贴数
            userCount:"?",             //论坛会员数
            sign_ranking:"签到看排名",
            campusList:[],      //校园专区
            exchangeList:[],    //交流与讨论专区
            affairList:[],      //论坛事务专区
            postHeats:[],       //最新热帖
            postPublishs:[],    //最新发表
            postlastReplys:[],  //最新回复
            postEssences:[],    //最新精华
            users:[],
            isAddStyle:false
        },
        methods:{
            signIn(){
                if (userInfo != null){
                    if (this.isSign == false){
                        axios.get(`/leek_bbs/bbs/sign/userSign?uid=${userInfo.id}&isExecuteSign=1`).then(response => {
                            let data = response.data;
                            this.isSign = true;
                            this.isAddStyle = true;
                            this.continuous_days = data.continuous_days;
                            this.sign_ranking = data.sign_ranking;
                            ui.success(`用户签到成功,已签到${data.total_days}天,<br>连续签到${data.continuous_days}天`,2000,true);
                            setTimeout(function () {
                                indexApp.initAllCount();
                            },1000)

                        }).catch(error => {
                            console.log(error);
                        })
                    }else{
                        window.open("/leek_bbs/skipPage/sign");
                    }
                }else {
                    layui.login();
                }
            },
            initPlate(){
                axios.get('/leek_bbs/bbs/plate/findAll').then(response => {
                    let data = response.data;
                    data.forEach(item => {
                        if (item.plate_vest.indexOf("校园专区") != -1) {
                            this.campusList.push(item);
                        }else if (item.plate_vest.indexOf("交流与讨论") != -1){
                            this.exchangeList.push(item);
                        } else {
                            this.affairList.push(item);
                        }
                    })
                })
            },
            initAllCount(){
                axios.get('/leek_bbs/bbs/sign/getCountMapData').then(response => {
                    var data = response.data;
                    //console.log(data);
                    this.todayPostCount = data.todayPostCount==null?'0':data.todayPostCount;
                    this.yesterdayPostCount = data.yesterdayPostCount==null?'0':data.yesterdayPostCount;
                    this.userCount = data.userCount==null?'0':data.userCount;
                    this.postCount = data.postCount==null?'0':data.postCount;
                    this.todaySignCount = data.todaySignCount==null?'0':data.todaySignCount;
                }).catch(error => {
                    console.log("===="+error);
                })
            },
            initPosts(){
                axios.get('/leek_bbs/bbs/postBrowse/findNewestPost').then(response => {
                    let data = response.data;
                    this.postHeats = data.postHeats;
                    this.postPublishs = data.postPublishs;
                    this.postlastReplys = data.postlastReplys;
                    this.postEssences = data.postEssences;
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        created(){
            this.initPlate();
            setTimeout(() => {
                this.initPosts();
            },100);
        }
    });
    layui.use('util',function () {
        var util = layui.util;

        indexApp.initAllCount();
        setTimeout(function () {
            initIsSign()
        },300);
        //initIsSign();
        function initIsSign() {
            if (userInfo != null){
                /*获取签到数据*/
                axios.get(`/leek_bbs/bbs/sign/userSign?uid=${userInfo.id}&isExecuteSign=0`).then(response => {
                    let data = response.data;
                    //console.log(data);
                    if (data.sign_status == "1") {
                        indexApp.isSign = true;
                        indexApp.isAddStyle = true;
                        indexApp.continuous_days = data.continuous_days;
                        indexApp.sign_ranking = data.sign_ranking;
                    }
                }).catch(error => {
                    console.log(error);
                });
                setTimeout(() => {
                    axios.get('/leek_bbs/getOnlineList').then(result => {
                        console.log(result.data.length);
                        indexApp.users = result.data;
                    })
                },1500);
            }

        }
    });

</script>
</body>

</html>